<script lang="ts" setup>
    import {onMounted, ref} from 'vue'
// 这个元素没怎么搞清楚
    const style = document.styleSheets[0].cssRules[0].style;
    const themes = [
      {
        // 蓝色
        theme: 'blue',
        color: '#3B82F6'
      },{
        // 绿色
        theme: 'green',
        color: '#10B981'
      },{
        // 红色
        theme: 'red',
        color: '#F43F5E'
      },{
        // 橙色
        theme: 'orange',
        color: '#F97316'
      }
    ]
    const moreBtn = ref<HTMLElement>();
    const panels = ref<HTMLElement>();
    let isFold = false;
    const foldStyle = {
      transform: 'translate(-50%,-50%) scale(0)'
    }
    const unFoldStyle = {
      transform: 'translate(0,0) scale(1)'
    }
    function changeTheme(theme) {
      if(typeof theme !== 'string') return
      const body = document.body.setAttribute('data-theme', theme);
    }
    onMounted(() => {
      moreBtn.value.addEventListener('click', () => {
        const styleObj = isFold ? unFoldStyle : foldStyle;
        for(const attr in styleObj){
          panels.value.style[attr] = styleObj[attr]
        }
        isFold = !isFold
      })
    })
</script>
<template>
  <div class="themesWrap">
    <span class="themesSlogan" @click="changeTheme" ref="moreBtn">
      更多 
    </span>
    <div class="panelWrap" ref="panels">
      <div class="themesPanel">
        <span title="点击查看更多功能" name="点击查看更多功能">选择主题色</span>
        <ul class="themes">
          <li v-for="(item, index) in themes" :key="index" :style="{backgroundColor: item.color}" @click="changeTheme(item.theme)"></li>
        </ul>
      </div>
    </div>  
  </div>
</template>
<style lang="scss" scoped>
.themesWrap{
  z-index: 1;
  position: relative;
}
.themesSlogan{
  cursor: pointer;
  box-shadow: 0 0 0px 2px #c4c7ce;
  transition: all .2s;
  font-size: 16px;
  line-height: 24px;
  &:hover{
    font-size: 16px;
    font-weight: bold;
  }
  border-radius: 12px;
  padding: 0 8px;
}
.panelWrap{
  position: absolute;
  left: 0px;
  top: 30px;
  transform: translate(0,0) scale(1);
  transition: all .6s;
}
.themesPanel{
  box-shadow: 0 0 2px 0;
  align-items: center;
  height: 100px;
  width: 600px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border-radius: 16px;
  span{
    padding-left: 10px;
  }
  ul{
    overflow: hidden;
  }
  li{
    cursor: pointer;
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid black;
    margin: 10px;
  }
  // li:nth-of-type(1){
  //   background-color: #3B82F6;
  // }
  // li:nth-of-type(2){
  //   background-color: #10B981;
  // }
  // li:nth-of-type(3){
  //   background-color: #F43F5E;
  // }
  // li:nth-of-type(4){
  //   background-color: #F97316;
  // }
}
</style>